<!-- 事项配置 -->
<template>
  <div class="management-tree">
    <div class="btn-right">
      <el-button v-if="!showChild" type="primary" size="mini" @click="addFn">保存</el-button>
    </div>
    <div class="tree-form">
      <div class="tree-box">
        <el-tree
          ref="menuTree"
          :data="data"
          :props="defaultProps"
          show-checkbox
          node-key="primaryKey"
          @check-change="handleCheckChange"
          :default-checked-keys="isChoseTree" >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.sortCodePath }}{{ data.chargeItemName }}</span>
            <span>
              <el-button type="text" size="mini" @click.stop="() => update(node, data)">编辑</el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="form-box" v-if="showChild">
        <div class="form-box-item">
          <el-form :model="typeForm" ref="childForm" label-width="150px" size="small" label-position="right">
            <el-col :span="24">
              <el-form-item label="事项名称" prop="chargeItemName">
                <el-input  v-model="typeForm.chargeItemName" disabled> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="显示名称" prop="chargeItemAliasName" :rules="{required: true, message: '显示名称不能为空', trigger: 'blur'}">
                <el-input  v-model="typeForm.chargeItemAliasName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="事项编码" prop="sortCode">
                <el-input type="number" v-model="typeForm.sortCode"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="事项编号" prop="chargeCode">
                <el-input maxlength="100" v-model="typeForm.chargeCode"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="height:50px;">
              <el-form-item label="类型分类" prop="category">
                <el-select v-model="typeForm.category" placeholder="请选择" disabled>
                  <el-option
                    v-for="item in constantList.chargeItemCategory"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div v-if="typeForm.category==2">
              <el-col :span="24">
                <el-form-item label="事项类别" prop="matterType" :rules="{required: true, message: '事项类别不能为空', trigger: 'change'}">
                  <el-select v-model="typeForm.matterType" placeholder="请选择">
                    <el-option
                      v-for="item in constantList.chargeItemMatterType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="事项子项" prop="chargeItemGroup" :rules="{required: true, message: '事项子项', trigger: 'change'}">
                  <el-select v-model="typeForm.chargeItemGroup" placeholder="请选择">
                    <el-option
                      v-for="item in chiledEventTypeList"
                      :key="item.primaryKey"
                      :label="item.chargeItemName"
                      :value="item.primaryKey">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="填报类型" prop="reportType" :rules="{required: true, message: '填报类型不能为空', trigger: 'change'}">
                  <el-select v-model="typeForm.reportType" placeholder="请选择">
                    <el-option
                      v-for="item in constantList.chargeItemReportType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="财会类型" prop="accountingTypeList" :rules="{required: true, message: '财会类型不能为空', trigger: 'change'}">
                  <el-select v-model="typeForm.accountingTypeList" multiple placeholder="请选择">
                    <el-option
                      v-for="item in constantList.accountingType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="填报负责岗位" prop="fillingPositionList" :rules="{required: true, message: '填报负责岗位不能为空', trigger: 'change'}">
                  <el-select v-model="typeForm.fillingPositionList" placeholder="请选择" multiple collapse-tags>
                    <el-option
                      v-for="item in postList"
                      :key="item.catalogKey"
                      :label="item.positionName"
                      :value="item.catalogKey">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="关联事项模版" prop="chargeItemType" :rules="{required: true, message: '关联事项模版不能为空', trigger: 'blur'}">
                  <el-select v-model="typeForm.chargeItemType" placeholder="请选择">
                    <el-option
                      v-for="item in constantList.chargeItemType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="关联合同类型" prop="contractType">
                  <el-select v-model="typeForm.contractType" placeholder="请选择">
                    <el-option
                      v-for="item in constantList.chargeItemContractType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="是否支持报销" prop="supportReimbursement" :rules="{required: true, message: '是否支持报销不能为空', trigger: 'blur'}">
                  <el-select v-model="typeForm.supportReimbursement" placeholder="请选择">
                    <el-option
                      v-for="item in optionsAssets"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" >
                <el-form-item label="是否资本性支出" prop="ifCapitalPayment" :rules="{required: true, message: '是否资本性支出不能为空', trigger: 'blur'}">
                  <el-select v-model="typeForm.ifCapitalPayment" placeholder="请选择">
                    <el-option
                      v-for="item in optionsAssets"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="typeForm.supportReimbursement==1"> 
                <el-form-item label="限定报销额度" prop="reimbursementLimit" :rules="{required: true, message: '报销额度不能为空', trigger: 'blur'}">
                  <el-input type="number" v-model="typeForm.reimbursementLimit"> </el-input>
                </el-form-item>
              </el-col>
            </div>
            <div>
              <el-col :span="24">
                <el-form-item label="账单类型" prop="billTypeList">
                  <el-select v-model="typeForm.billTypeList" multiple collapse-tags placeholder="请选择">
                    <el-option
                      v-for="item in constantList.chargeItemBillType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </div>
            <el-col :span="24" >
              <el-form-item label="是否主力店">
                <el-select v-model="typeForm.ifMainStore" placeholder="请选择">
                  <el-option
                    v-for="item in mainStoreList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" >
              <el-form-item label="是否过滤空置">
                <el-select v-model="typeForm.ifFilterVacant" placeholder="请选择">
                  <el-option
                    v-for="item in optionsAssets"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="说明" prop="chargeItemDesc">
                <el-input type="textarea"  v-model="typeForm.chargeItemDesc"> </el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="cancel">取 消</el-button>
            <el-button size="mini" type="primary" @click="save('childForm')">保存</el-button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // typeForm.category == 2是事项 3是费项
  import {businessConstant,organizationList,bussinessTree,bussinessUpdate,bussinessDetail,bussinessCreated,apiMatterChildList} from '../../../api/index'
  export default {
    data() {
      return {
        isChoseTree: [],
        defaultProps:{
          children: 'child',
          label: 'chargeItemName'
        },
        data:[],
        showChild:false,
        list:[],
        typeForm:{
          sortCode:'',
          chargeCode:'',
          ifCapitalPayment:'',
          accountingTypeList:'',
          accountingType:'',
          chargeItemType:'',
          matterType:'',
          reportType:'',
          chargeItemName:'',
          chargeItemDesc:'',
          categoryAliasName:'',
          fillingPosition:'',
          fillingPositionList:[],
          contractType:'',
          ifMainStore:0,
          ifFilterVacant:0,
          supportReimbursement:'',
          reimbursementLimit:'',
          chargeItemAliasName:'',
          chargeItemGroup:'',
          billTypeList:[],
          billType:''
        },
        isDisabled:false,
        constantList:[],
        chiledEventTypeList:[],
        postList:[],
        optionsAssets:[{value:1,label:'是'},{ value:0, label:'否'}],
        mainStoreList:[{value:1,label:'是'},{ value:0, label:'否'},{ value:2, label:'不限'}],
      };
    },

    created() {
      this.getMatterChildList()
      this.getBusinessConstant()
      this.getOrganizationList()
    },

    methods: {
      async getOrganizationList(){
        let res = await organizationList()
        this.postList=res.rows
      },
      async getBusinessConstant(){
        let res = await businessConstant()
        this.constantList=res
      },
      async getTree(){
        this.isChoseTree = [];
        let res = await bussinessTree({
          mapBizId:this.$route.query.key,
        })
        if(res.rows&&res.rows.length>0){
          this.data =res.rows[0].child
          this.setCheckedFn(this.data)
        }
        setTimeout(() => {
          this.handleCheckChange()
        })
      },
      setCheckedFn (list) {
        list.forEach((item) => {
          if (item.isUsed && (!item.child || item.child.length == 0)) {
            this.isChoseTree.push(item.primaryKey)
          }
          if (item.child && item.child.length > 0) {
            this.setCheckedFn(item.child)
          }
        })
      },
      // 选择树
      handleCheckChange () {
        let res = this.$refs.menuTree.getCheckedNodes(false, true)
        let arr = []
        res.forEach((item) => {
          arr.push({
            sortCode: item.sortCode,
            chargeCode: item.chargeCode,
            matterType: item.matterType,
            chargeItemGroup: item.chargeItemGroup,
            reportType: item.reportType,
            chargeItemAliasName:item.chargeItemName,
            accountingType: item.accountingTypeList && item.accountingTypeList.length ? item.accountingTypeList.join(',') : '',
            fillingPosition: item.fillingPositionList && item.fillingPositionList.length ? item.fillingPositionList.join(',') : '',
            billType: item.billTypeList && item.billTypeList.length ? item.billTypeList.join(',') : '',
            chargeItemType: item.chargeItemType,
            supportReimbursement: item.supportReimbursement,
            ifMainStore: item.ifMainStore,
            ifFilterVacant: item.ifFilterVacant,
            ifCapitalPayment: item.ifCapitalPayment,
            reimbursementLimit: item.reimbursementLimit,
            chargeItemKey:item.primaryKey,
            bizId:this.$route.query.key,
            bizType:'enterprise'
          })
        })
        this.list = arr
      },
      async addFn () {
        let res = await bussinessCreated({
          bizId:this.$route.query.key,
          list:this.list
        })
        this.$message.success('保存成功！')
      },
      save(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.typeForm.billType =this.typeForm.billTypeList&&this.typeForm.billTypeList.length>0? this.typeForm.billTypeList.join():''
            this.typeForm.accountingType =this.typeForm.accountingTypeList&&this.typeForm.accountingTypeList.length>0? this.typeForm.accountingTypeList.join(','):''
            this.typeForm.fillingPosition = this.typeForm.fillingPositionList.join()
            let res =await bussinessUpdate(this.typeForm)
            this.$message.success('编辑成功！')
            this.cancel()
          }
        });
      },
      async update(node, data){
        Object.keys(this.typeForm).forEach(key => {this.typeForm[key]=null,setTimeout(() => {
            this.$refs.childForm.clearValidate(key)
        }, 0);});
        this.showChild = true
        let res = await bussinessDetail({chargeItemKey:data.primaryKey,bizId:this.$route.query.key})
        this.isDisabled = res.primaryKey?true:false
        this.typeForm = Object.assign(this.typeForm,res)
        this.typeForm.primaryKey = data.primaryKey
        this.typeForm.bizId=this.$route.query.key
        this.typeForm.chargeItemKey=this.typeForm.primaryKey
        this.typeForm.fillingPositionList = res.fillingPosition?res.fillingPosition.split(','):[]
        this.typeForm.billTypeList = res.billType?res.billType.split(','):[]
        this.typeForm.accountingTypeList = res.accountingType?res.accountingType.split(','):[]
      },
      cancel(){
        this.showChild = false
        Object.keys(this.typeForm).forEach(key => this.typeForm[key]=null);
      },

      //事项子项
      async getMatterChildList () {
        let res = await apiMatterChildList({enterpriseid:this.$route.query.key,childType: 2});
        this.chiledEventTypeList = res.rows || []
      },
    },
  };
</script>
<style lang="scss" scoped>
  .btn-right{
    position: absolute;
    top:-50px;
    right: 20px;
  }
  .el-tree {
    position: relative;
    cursor: default;
    background: #FFF;
    color: #606266;
    width: 100%!important;
  }
  .management-tree{
    width: 100%;
    .tree-form{
      display: flex;
      justify-content: flex-start;
      .tree-box{
        width:40%;
        height: calc(100vh - 150px);
        overflow-y: auto;
      }
      .form-box{
        width: 60%;
        display: flex;
        justify-content: center;
        .form-box-item{
          width: 70%;
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          .dialog-footer{
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
</style>